<template>
  <div class="supplier-charts">
    <el-row :gutter="20">
      <!-- 供应商桑基图 -->
      <el-col :span="24">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>供应商流向</span>
              <el-icon><Share /></el-icon>
            </div>
          </template>
          <div class="chart-container">
            <v-chart
              class="chart"
              :option="sankeyOption"
              autoresize
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useAnrStore } from '../stores/anr'
import { storeToRefs } from 'pinia'
import { Share } from '@element-plus/icons-vue'

const anrStore = useAnrStore()
const { supplierData } = storeToRefs(anrStore)

// Sankey option
const sankeyOption = computed(() => {
  const data = (supplierData.value && supplierData.value.sankey) || {}
  return {
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
    },
    series: data.series || []
  }
})
</script>

<style scoped>
.supplier-charts { margin-bottom: 20px; }
.chart-card { height: 500px; }
.card-header { display: flex; justify-content: space-between; align-items: center; font-weight: 500; }
.chart-container { height: 420px; width: 100%; }
.chart { height: 100%; width: 100%; }
</style>
